<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="./success.html" method="post" onsubmit="return checkLogin()">
        用户名：<input type="text" name="username" onblur="checkUsername()">
        <span id="usernameMsg"></span><br>
        密码：<input type="text" name="password" onblur="checkPassword()">
        <span id="passwordMsg"></span><br>
        <input type="submit" value="登录" ><br>
    </form>
    <script>
        function checkUsername(){
            //获取用户输入的用户名
            var username = document.getElementsByName("username")[0].value
            //设置用户名的正则表达式，验证用户名必须为6～15的数字字母下划线
            var reg_username = /^\w{6,15}$/
            //验证用户名
            if(!reg_username.test(username)){
                //验证失败，展示提示信息
                document.getElementById("usernameMsg").innerHTML = "验证用户名必须为6～15的数字字母下划线"
                return false
            }
            else{
                document.getElementById("usernameMsg").innerHTML = ""
                return true
            }
        }
        function checkPassword(){
            //获取用户输入的密码
            var password = document.getElementsByName("password")[0].value
            //设置密码的正则表达式，验证密码为6～10位并且有英文
            var reg_password = /^(?=.*[a-zA-Z])[ -~]{6,10}$/
            //验证密码
            if(!reg_password.test(password)){
                //验证失败，展示提示信息
                document.getElementById("passwordMsg").innerHTML = "验证密码为6～10位并且有英文"
                return false
            }
            else{
                document.getElementById("passwordMsg").innerHTML = ""
                return true
            }
        }

        function checkLogin(){
            var res1 = checkUsername()
            var res2 = checkPassword()
            return res1 && res2
        }
    </script>
</body>
</html>